<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="无人机详情" :visible.sync="dialog_7" width="30%">
        <h4 class="tad-tit">基本信息</h4>
        <table class="moni_table" size="mini">
          <tr>
            <th>设备名称</th>
            <td>{{warnData.time}}</td>
          </tr>
          <tr>
            <th>设备编号</th>
            <td>{{warnData.addr}}</td>
          </tr>
          <tr>
            <th>经度</th>
            <td>{{warnData.jd}}</td>
          </tr>
          <tr>
            <th>纬度</th>
            <td>{{warnData.wd}}</td>
          </tr>
        </table>
        <h4 class="tad-tit">基本信息</h4>
        <div>
          <video style="width:100%;height:150px;" src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
                    your browser does not support the video tag
          </video>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        zoom: 16,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              //alert('click');
              this.dialog_7=true
            }
          }
        }],
        // 弹窗信息
        dialog_7:false,
        warnData:{
        time:'2018/1/1 12:25:30',
        addr:'（设备或部件名称）',
        jd:'118E',
        wd:'29n',
        schd:'长江上游段',
        yjnr:'(如水质等级低于4级)'
      },
      }
    },
    methods:{

    }
  };
</script>
<style>
.amap-page-container {
  height:100%;
}
</style>
